<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="swiper-4.5.3/dist/css/swiper.min.css">
    <link rel="shortcut icon" href="favicon.ico">
    <title>苏宁易购</title>
</head>
<body>
    <!--顶部搜索框-->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" placeholder="抢1000元手机卷"/>
            </form>
        </div>
        <a href="#" class="login"></a>
    </div>
    <!--banner部分 轮播图部分-->
    <div class="banner">
<!--        <img src="upload/banner.png" alt=""/>-->
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="upload/banner.png" alt=""/></div>
                <div class="swiper-slide"><img src="upload/1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="upload/2.png" alt=""></div>
                <div class="swiper-slide"><img src="upload/3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="upload/5.jpg" alt=""></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- Swiper JS -->
        <script src="swiper-4.5.3/dist/js/swiper.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
            });
        </script>
    </div>
    <!--广告部分-->
    <div class="ad">
        <img src="upload/ad.png" alt=""/>
    </div>
    <!--nav模块-->
    <div class="nav">
        <a href="#">
            <img src="upload/nav1.webp" alt=""/>
            <span>天天低价</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt=""/>
            <span>苏宁超市</span>                        <!--？？这里为什么要将span转化为块级元素，明明不转换布局也不会有问题的？？？？？？？？？？？-->
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt=""/>
            <span>苏宁拼购</span>
        </a>
        <a href="#">
            <img src="upload/nav4.webp" alt=""/>
            <span>5G手机</span>
        </a>
        <a href="#">
            <img src="upload/nav5.webp" alt=""/>
            <span>苏宁家电</span>
        </a>
        <a href="#">
            <img src="upload/nav6.webp" alt=""/>
            <span>免费领水果</span>
        </a>
        <a href="#">
            <img src="upload/nav7.webp" alt=""/>
            <span>赚钱消消乐</span>
        </a>
        <a href="#">
            <img src="upload/nav8.webp" alt=""/>
            <span>签到有礼</span>
        </a>
        <a href="#">
            <img src="upload/nav9.webp" alt=""/>
            <span>领劵中心</span>
        </a>
        <a href="#">
            <img src="upload/nav10.webp" alt=""/>
            <span>更多频道</span>
        </a>
    </div>
<!--底部部分-->
    <div class="suning-bt">
        <ul>
            <li>
                <a href="javascript:;">
                    <img src="images/1.png" alt=""><br/>
                    <span>猜你喜欢</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/2.png" alt=""><br/>
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/3.png" alt=""><br/>
                    <span>排行榜</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/4.png" alt=""><br/>
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/5.png" alt=""><br/>
                    <span>我的易购</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>